<template>
  <div class="chat">
      <div class="top">在线客服 <span>一片爱心,丝丝柔情。</span><i class="el-icon-remove" @click="close"></i></div>
          <ul  class="content"  ref="content">
              <li
                  v-for="(item, index) in news" :key="index"
                  class="content-item">
                  <div>
                      <img v-if="item.uId != $store.state.lognUser._id"
                           src="http://localhost:3000/public/img/customerService/customer-service.png" alt=""><img v-else :src="item.avatar" alt="">
                  </div>
                  <p :class="{business: $store.state.lognUser._id != item.uId, customer:  $store.state.lognUser._id == item.uId}">{{item.msg}}</p>
              </li>
          </ul>
      <div class="send">
          <el-input type="textarea"
                    placeholder="请输入内容"
                    :rows="5"
                    style="height: 88px; overflow:hidden;"
                    v-model="textarea"
          ></el-input>
          <el-button type="primary" size="small" @click="send">发送</el-button>
      </div>
  </div>
</template>
<script>
export default {
      components:{},
      props:{},
      data(){
        return {
            textarea: '',
            news: [],

        }
      },
    created() {

    },
    sockets: {
        connect: function () {
            console.log('socket connected', '链接了')
        },
        sendToCustomer: function (data) {
            this.news.push(data)
        }

    },
    watch: {
        news() {
            setTimeout(()=> {
                this.$refs.content.scrollTop = this.$refs.content.scrollHeight
            }, 100)
        }
    },
    methods: {
      send() {
        if (this.textarea.length > 0) {
            let msgObj = {
                uId: this.$store.state.lognUser._id,
                uname: this.$store.state.lognUser.nickname,
                msg: this.textarea,
                avatar: this.$store.state.lognUser.avatar
            }
            this.$socket.emit('msg', msgObj)
            this.news.push(msgObj)

            this.textarea = ''
        }else {
            this.$message({
                showClose: true,
                message: '请输入信息',
                type: 'warning'
            })
        }
      },
        close() {
          this.$emit('close')
        },


    }
}
</script>
<style scoped>
    .chat {
        background-color: #fff;
        width: 350px;
        height: 500px;
        border-radius: 10px 10px 0 0;
        display: flex;
        flex-flow: column nowrap;
    }
    .top {
        height: 50px;
        background-color: #B50E03;
        border-radius: 10px 10px 0 0;
        color: #ffffff;
        font-weight: 700;
        line-height: 50px;
        font-size: 17px;
        display: flex;
        align-items: center;
        justify-content: space-around;
    }
    .top span {
        font-size: 12px;
        font-weight: 500;
    }
    .top i {
        text-align: right;
        font-weight: 500;
    }
    .top i:hover {
        color: #999999;
    }
    .content {
        flex: 1;
    }
    .content *, .content {
        overflow: auto;
        margin: 0;
        padding: 0;
    }
    .send {
        height: 120px;
        border-top: 1px solid #DDDDDD;
        display: flex;
        flex-flow: column nowrap;
    }

    .content-item {
        display: flex;
        align-items: center;
    }
    .content-item > div {
        width: 40px;
        margin: 1em 0.5em;
    }
    .content-item >div img {
        width: 40px;
        height: 40px;
    }
    .content-item p {
        border-radius: 5px;
        padding: 0 1em;
        min-height: 2em;
        font-size: 16px;
        max-width: 12em;
        word-wrap:break-word;
        line-height: 2em;
    }
    .customer {
        background-color: #409EFF;
    }
    .business {
        border: 1px solid #000000;

    }
</style>